<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 10px solid green;
            background-color: red;
        }
        #box2 {
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 10px solid green;
            background-color: yellowgreen;
            overflow: auto;
        }
        
    </style>
    <script type="text/javascript">
        window.onload = () => {
            let btn1 = document.getElementById("btn1");
            let box1 = document.getElementById("box1");
            btn1.onclick = () => {
                /*
                  js修改的样式是内联样式
                    css这种若使用！important，js是无法覆盖的
                */
                box1.style.width = "300px";
                box1.style.height = "300px";
                box1.style.backgroundColor = "blue";
            }
            let btn2 = document.getElementById("btn2");
            btn2.onclick = () => {
                console.log("------------内联样式读取------------");
                console.log(box1.style.cssText);
            }
            let btn3 = document.getElementById("btn3");
            btn3.onclick = () => {
                console.log("------------显示样式读取------------");
                let style = window.getComputedStyle(box1, null); //参数2为伪类
                console.log(style.width);
                console.log(style.height);
                console.log(style.backgroundColor);
                //console.log(style);
                console.log("------------显示样式读取[兼容]------------");
                console.log(getStyle(box1, "width"));
                console.log(getStyle(box1, "height"));
                console.log(getStyle(box1, "backgroundColor"));
            }

            let getStyle = (obj, attr) => {
                if (!window.getComputedStyle) {
                    return obj.currentStyle[attr];
                } else {
                    return window.getComputedStyle(obj, null)[attr];
                }
            }

            let btn4 = document.getElementById("btn4");
            btn4.onclick = () => {
                console.log("------------样式其他方法------------");
                //offsetWidth/offsetHeight
                //offsetWidth: width+padding+border
                //offsetHeight: height+padding+border
                console.log(box1.offsetWidth);
                console.log(box1.offsetHeight);
                //clientWidth/clientHeight
                //clientWidth: width+padding
                //clientHeight: height+padding
                console.log(box1.clientWidth);
                console.log(box1.clientHeight);
                //offsetParent
                //返回最近的定位父元素
                console.log(box1.offsetParent);
                //scrollWidth/scrollHeight
                //scrollWidth: width+padding+滚动条
                //scrollHeight: height+padding+滚动条
                console.log(box1.scrollWidth);
                console.log(box1.scrollHeight);
                //scrollTop/scrollLeft
                //scrollTop: 滚动条滚动的高度
                //scrollLeft: 滚动条滚动的宽度
                console.log(box1.scrollTop);
                console.log(box1.scrollLeft);
            }
            let box2 = document.getElementById('box2');
            let input = document.getElementsByTagName('input')[0];
            box2.onscroll = function () {
                console.log('滚动了');
                if(box2.scrollHeight - box2.scrollTop == box2.clientHeight){
                    console.log('到底了');
                    input.disabled = false;
                }
            }

        }
    </script>
</head>

<body>
    <button id="btn1">button</button>
    <button id="btn2">button2</button>
    <button id="btn3">button3</button>
    <button id="btn4">button4</button>
    <br />
    <div id="box1"></div>
    <div id="box2">
        <p>请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议请仔细，阅读以下协议</p>
    </div>
    <input type="checkbox" disabled="disabled" value="button" />阅读以下协议请仔细

</body>

</html>